<template>
    <div class="goodsinfo-container">
        <!-- 小球 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        
        <!-- 轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunboList="lunboList"></swiper>
                </div>
            </div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsInfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        商场价：<del>￥{{goodsInfo.market_price}}</del> &nbsp;&nbsp;销售价：<span class="now-price">￥{{goodsInfo.sell_price}}</span>
                    </p>
                    <p>
                        购买数量： <numberbox @getcount="getSelectedCount"></numberbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addCart">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{goodsInfo.goods_no}}</p>
                    <p>库存情况：{{goodsInfo.stock_quantity}}</p>
                    <p>上架时间：{{goodsInfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    // 导入轮播图组件
    import swiper from '../subcomponents/swiper.vue';
    // 导入数量
    import numberbox from '../subcomponents/numberbox.vue';

    export default {
        data() {
            return {
                id: this.$route.params.id, //将路由中的参数挂在到data
                lunboList: [],
                goodsInfo: [],
                ballFlag: false, // 控制小球隐藏和显示
                selectedCount: 1
            }
        },
        created() {
            this.getLunbo();
            this.getGoodsInfo();
        },
        methods: {
            getLunbo() {
                this.$http.get('http://vue.studyit.io/api/getthumimages/'+this.id).then(result=>{
                    if( result.body.status === 0 ){
                        result.body.message.forEach(item => {
                            item.img = item.src;
                        });
                        this.lunboList = result.body.message;
                        // console.log(this.lunboList);
                    }
                });
            },
            getGoodsInfo() {
                this.$http.get('http://vue.studyit.io/api/goods/getinfo/'+this.id).then(result=>{
                    this.goodsInfo = result.body.message[0];
                    // console.log(this.goodsInfo);
                });
            },
            goDesc(id) {
                //
                this.$router.push({ name: 'goodsdesc', params: { id } });
            },
            goComment(id) {
                this.$router.push( { name: 'goodscmt', params: { id } } );
            },
            addCart() {
                this.ballFlag = !this.ballFlag;
            },
            beforeEnter(el) {
                el.style.transform = 'translate(0,0)';
            },
            enter(el,done) {
                el.offsetWidth;

                // 小球动画思路
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                // console.log( ballPosition );
                // 获取徽标的位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();

                // console.log(badgePosition);

                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;

                el.style.transform = `translate(${xDist}px,${yDist}px)`;
                el.style.transition = 'all 0.3s cubic-bezier(0.68, -0.04, 0.91, 0.41)';
                //代表afterEnter的引用
                done();
            },
            afterEnter(el) {
                this.ballFlag = !this.ballFlag;
            },
            getSelectedCount(count) {
                this.getSelectedCount = count;
                console.log(this.getSelectedCount);
            }
        },
        components: {
            'swiper': swiper,
            'numberbox': numberbox
        }
    }
</script>
<style lang="less" scoped>
.goodsinfo-container{
    background:#eee;
    .now-price{
        font-size: 16px;
        color:#f00;
    }
    .mui-card-footer{
        display: block;  
        button {
            margin:10px 0;
        } 
    }
    .ball{
        width: 15px;
        height: 15px;
        background: #f00;
        border-radius: 50%;
        position: absolute;
        z-index: 999;
        top:390px;
        left:146px;
    }
}
</style>
